<template>
  <ContentWrap>
    <div class="content">
      <el-icon color="#1890ff"> <InfoFilled /> </el-icon>上次更新时间：{{ time }}
      <strong></strong>
      <span @click="getApi()">立即更新</span>
    </div>
    <el-table :data="textInfo" style="width: 100%" v-loading="loading">
      <el-table-column label="参数">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-tag
              class="ml-2"
              type="info"
              style="color: #fff"
              :color="scope.row.color"
              effect="light"
              >Tag {{ scope.row.name }}</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="描述">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.text }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="当前值">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.unit }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { ContentWrap } from '@/components/ContentWrap'
import { fillZero, timestamp } from './common'
import {
  getSystemCpuCount,
  getSystemCpuUsage,
  getProcessStartTime,
  getProcessUptime,
  getProcessCpuUsage,
  getSystemByToken
} from '@/api/systemInfo/index'

interface DataType {
  params: string
  name: string
  value: string
}
const loading = ref(true)
const time = ref('2023年4月7日 11时38分50秒')
const textInfo = ref([
  { name: 'system.cpu.count', color: 'green', text: 'CPU 数量', unit: '核' },
  { name: 'system.cpu.usage', color: 'green', text: '系统 CPU 使用率', unit: '%' },
  { name: 'process.start.time', color: 'purple', text: '应用启动时间点', unit: '' },
  { name: 'process.uptime', color: 'purple', text: '应用已运行时间', unit: '秒' },
  { name: 'process.cpu.usage', color: 'purple', text: '当前应用 CPU 使用率', unit: '%' }
])
const getApi = async () => {
  let result = await getSystemCpuCount({ id: 'sds' })
  let resultStartTime = await getProcessStartTime({})
  let resultSysCpuUsage = await getSystemCpuUsage({})
  let resultUptime = await getProcessUptime({})
  let resultProCpuUsage = await getProcessCpuUsage({})
  let resultByToken = await getSystemByToken({})
  console.log(result, 'result')
  textInfo.value.map((item) => {
    if (item.name === result.name) {
      item.unit = result.measurements[0].value + ' 核'
    }
    if (item.name === resultStartTime.name) {
      var date = new Date(resultStartTime.measurements[0].value * 1000)
      item.unit = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}
     ${fillZero(date.getHours())}:${fillZero(date.getMinutes())}:${fillZero(date.getSeconds())}`
    }
    if (item.name === resultSysCpuUsage.name) {
      item.unit = (resultSysCpuUsage.measurements[0].value * 100).toFixed(2) + ' %'
    }
    if (item.name === resultUptime.name) {
      item.unit = resultUptime.measurements[0].value + '秒'
    }
    if (item.name === resultProCpuUsage.name) {
      item.unit = (resultProCpuUsage.measurements[0].value * 100).toFixed(2) + ' %'
    }

    let timeDate = new Date(resultByToken.timestamp)
    time.value = `${timeDate.getFullYear()}年${timeDate.getMonth() + 1}月${timeDate.getDate()}日
     ${fillZero(timeDate.getHours())}时${fillZero(timeDate.getMinutes())}分${fillZero(
      timeDate.getSeconds()
    )}秒`
  })
  loading.value = false
  // console.log(resultProCpuUsage, '--------', resultByToken.timestamp)
}
onMounted(() => {
  getApi()
})
</script>

<style lang="less" scoped>
.content {
  display: flex;
  align-items: center;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  padding: 8px 15px 8px 17px;
  font-size: 14px;
  margin-bottom: 20px;

  i {
    margin-right: 4px;
  }

  strong {
    width: 1px;
    border-left: 1px solid #ccc;
    height: 16px;
    margin: 0 10px;
    display: block;
  }

  span {
    color: #1890ff;
    cursor: pointer;
  }
}
</style>
